<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>${gglhd.name}</title>
    <link href="/statics/view/css/ggl.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body {
            position: relative;
            height: 640px;
            overflow: hidden;
            background: url(${gglhd.bgPath}) no-repeat 50% 0;
        }
    </style>
    <script type="text/javascript" src="/statics/jquery/jquery.js"></script>
</head>
<body>

<div id="bg2"><img id="bg2_img" src="${gglhd.basePath}" width="295" height="195" style="position:absolute;"/></div>
<div id="gua1">
    <img id="gua1_img" src="/dbs/img/gglimg/gua_image.png" style="position: absolute;"/>
    <canvas id="front" style="position:absolute;"/>
</div>

<div id="notify">

    <img id="nImg" src="/dbs/img/gglimg/notice_content_bg.png" style="position: absolute;"/>

    <div id="nImg_div">
        <div>${gglhd.content}</div>
    </div>
</div>
<div id="baknotify">
    <img id="baknImg" src="/dbs/img/gglimg/notice_bg.png" style="position: absolute;"/>

    <div id="baknImg_div">

        <div>您当前剩余刮奖机会：<span id="number"></span></p>${gglhd.bak}</div>

    </div>
</div>
<div id="di"><img id="di_img" src="/dbs/img/gglimg/detail_declare_bg.png" style="position: absolute;"/></div>

<div id="bg1"></div>

<div id="show">
    <img id="show_img" src="/dbs/img/gglimg/dialog_bg.png" width="100%" height="100%"/>

    <div id="title">抱歉，您没有更多的刮奖机会！
        [#if gglhd.virtualCurrency > 0]
        <br/>花费<span style="color: #ff0000">${gglhd.virtualCurrency}宝币</span>继续刮奖</div>
    <img id="one_more_btn" src="/dbs/img/gglimg/btn_sure.png" style="margin-top: 30px;" onClick="hidediv()"/>
        [/#if]
    <img id="show_btn" src="/dbs/img/gglimg/btn_sure.png" style="margin-top: 30px;" onClick="hidediv()"/>
</div>
<div id="Okshow">
    <img id="Okshow_img" src="/dbs/img/gglimg/dialog_bg.png" width="100%" height="100%"/>

    <div id="Oktitle">恭喜您</div>
    <img id="OkGgl_btn" src="/dbs/img/gglimg/btn_one.png" style="margin-top: 25px;" onClick="OkOne()"/>
    <img id="Okshow_btn" src="/dbs/img/gglimg/btn_sure.png" style="margin-top: 25px;" onClick="Okhidediv()"/>
</div>


<script type="text/javascript">
    var ggl = '${gglhd.status}'
    var int = 0;
    var gua = 0;  // 可设置刮奖次数
    var imgSrc = '/dbs/img/gglimg/sorry.png';
    $(function () {

        var width = $("#show_img").width();
        var height = $("#show_img").height();
        var winheight = $(window).height();
        var winwidth = $(window).width();
        $("#show").css({"width": 350 + "px", "height": 160 + "px", "overflow": "hidden"});
        $("#Okshow").css({"width": 300 + "px", "height": 160 + "px", "overflow": "hidden"});
        $("#one_more_btn").css({"width": 176 * 0.5 + "px", "height": 76 * 0.5 + "px"});
        $("#show_btn").css({"width": 176 * 0.5 + "px", "height": 76 * 0.5 + "px"});
        $("#OkGgl_btn").css({"width": 176 * 0.5 + "px", "height": 76 * 0.5 + "px"});
        $("#Okshow_btn").css({"width": 176 * 0.5 + "px", "height": 76 * 0.5 + "px"});
        $("#gua_div").html("x" + gua);

        var body_width = $(window).width();
        var body_height = $(window).height();
        $("#gua1_img").width(300).height(160);
        var bg2_width = $("#bg2_img").width();
        var bg2_height = $("#bg2_img").height();
        $("#gua1").css({"margin-top": "20px"});
        $("#notify").css({"margin-top": "200px"});
        $("#nImg").width(300).height(150);
        $("#baknotify").css({"margin-top": "20px"});
        $("#baknImg").width(300).height(101);
        $("#di").css({"margin-top": "50px"});
        $("#di_img").width(414 * 0.7).height(24 * 0.7);
        if (ggl == 3) {
            $("#title").html("活动还未开始哟，请稍后过来");
            showdiv();
            return false;
        }
        if (ggl == 4) {
            $("#title").html("活动已结束了，请下次再来");
            showdiv();
            return false;
        }
        onStatus(width, height);

    });

    function reloadStyle(height, width) {
        var gua1_img_width = $("#gua1_img").width();
        $("#front").css({"margin-top": 9.3 + "px", "margin-left": 7.5 + "px"});
        if (gua > 0) {
            bodys(height, width);
        } else {
            showdiv();
        }

    }

    function onStatus(height, width) {

        var gglhdid = ${gglhd.id};
        $.ajax({
            url: "/gglhd/onStatus.do",
            type: 'POST',
            dataType: 'json',
            data: {
                gglhdid: gglhdid
            },
            success: function (data) {
                gua = data.gglnumber;
                $("#number").html(gua-1);
                if (gua > 0) {
                    int = 1;
                    if (data.ggljp != null) {
                        var gglJps = eval(data.ggljp);
                        imgSrc = gglJps.imgPath;
                        $("#Oktitle").html("恭喜您中了</p>" + gglJps.name + "</p>奖品：" + gglJps.jp);
                    } else {
                        imgSrc = '/dbs/img/gglimg/sorry.png';
                        $("#Oktitle").html("抱歉，您没有中奖，再接再厉！");
                    }

                } else {
                    showdiv();
                }
                reloadStyle(height, width);


            },
            error: function (data) {
                imgSrc = '/dbs/img/gglimg/sorry.png';
                $("#Oktitle").html("抱歉，您没有中奖，再接再厉！");
            }
        });
    }


    function bodys(height, width) {
        var img = new Image();
        var maskCtx = null;
        var canvas = document.querySelector('canvas');
        canvas.style.backgroundColor = 'transparent';
        canvas.style.position = 'absolute';
        img.addEventListener('load', function (e) {
            var ctx;
            var w = img.width, h = img.height;
            var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;
            var mousedown = false;

            function layer(ctx) {
                ctx.fillStyle = 'gray';
                ctx.fillRect(0, 0, w, h);
            }

            function eventDown(e) {
                e.preventDefault();
                mousedown = true;
            }

            function eventUp(e) {
                e.preventDefault();
                mousedown = false;
            }

            function eventMove(e) {

                e.preventDefault();
                if (mousedown) {
                    if (e.changedTouches) {
                        e = e.changedTouches[e.changedTouches.length - 1];
                    }
                    var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                            y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                    with (ctx) {
                        beginPath();
                        arc(x, y, 15, 0, Math.PI * 2);
                        fill();
                        getTransparentPercent(ctx, w, h)

                    }
                }
            }

            canvas.width = w;
            canvas.height = h;

            canvas.style.backgroundImage = 'url(' + img.src + ')';
            ctx = canvas.getContext('2d');
            ctx.fillStyle = 'transparent';
            ctx.fillRect(0, 0, w, h);

            layer(ctx);

            ctx.globalCompositeOperation = 'destination-out';
            canvas.addEventListener('touchstart', eventDown);
            canvas.addEventListener('touchend', eventUp);
            canvas.addEventListener('touchmove', eventMove);
            canvas.addEventListener('mousedown', eventDown);
            canvas.addEventListener('mouseup', eventUp);
            canvas.addEventListener('mousemove', eventMove);
        });
        img.src = imgSrc;
        (document.body.style);
    }
    var percent = null;

    function getTransparentPercent(ctx, width, height) {
        var imgData = ctx.getImageData(0, 0, width, height),
                pixles = imgData.data,
                transPixs = [];
        for (var i = 0, j = pixles.length; i < j; i += 4) {
            var a = pixles[i + 3];
            if (a < 128) {
                transPixs.push(i);
            }
        }

        percent = (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
        drawPercent(percent);
    }

    function drawPercent(percent) {
        if (percent > 50) {
            if (int = 1) {
                Okshowdiv();
            } else {
                showdiv();
            }

        }

    }

    function Okshowdiv() {
        document.getElementById("bg1").style.display = "block";
        document.getElementById("Okshow").style.display = "block";
    }
    function Okhidediv() {
        document.getElementById("bg1").style.display = 'none';
        document.getElementById("Okshow").style.display = 'none';
        location.href = "/gglhd/myGgl"
    }
    function OkOne() {
        location.href = "/gglhd/gglOpen?gglhdid="+${gglhd.id};
    }
    function showdiv() {
        document.getElementById("bg1").style.display = "block";
        document.getElementById("show").style.display = "block";
    }

    function hidediv() {
        document.getElementById("bg1").style.display = 'none';
        document.getElementById("show").style.display = 'none';
        location.href = "/dbs/index.html"
    }
</script>

<div class="cnzz" style="display: none;">
    <script src="http://s4.cnzz.com/z_stat.php?id=1259390685&web_id=1259390685" language="JavaScript"></script>
</div>

</body>
</html>